<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码生成器-zboy</title>
    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <!-- 引入element 的组件库-->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="code">
    <el-row :gutter="20">
        <el-col :span="12" :offset="6">
            <el-card class="box-card" v-loading="loading">
                <el-form ref="form" :model="form" label-width="200px" size="mini">
                    <el-form-item label="请选择数据库类型">
                        <el-select v-model="form.dbType" placeholder="请选择数据库类型">
                            <el-option label="MYSQL" value="MYSQL"></el-option>
                            <el-option label="ORACLE" value="ORACLE"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="数据库IP地址">
                        <el-input v-model="form.ip"></el-input>
                    </el-form-item>

                    <el-form-item label="数据库用户名">
                        <el-input v-model="form.userName"></el-input>
                    </el-form-item>

                    <el-form-item label="数据库密码">
                        <el-input v-model="form.passWord"></el-input>
                    </el-form-item>

                    <el-form-item label="请选择数据库">
                        <el-select v-model="form.dbName" placeholder="请选择数据库" @change="changDB(form.dbName)">
                            <el-option :label="dbName" :value="dbName" v-for="dbName in dbNameList"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label-position="right">
                        <el-button type="primary" @click="testConnect">连接测试</el-button>
                    </el-form-item>

                    <el-form-item label="请选择模板">
                        <el-select v-model="form.templetName" placeholder="请选择模板">
                            <el-option :label="templetName" :value="templetName"
                                       v-for="templetName in templetNameList"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="结构文档路径">
                        <el-input v-model="form.xmlPath"></el-input>
                    </el-form-item>

                    <el-form-item label="生产代码路径">
                        <el-input v-model="form.codePath"></el-input>
                    </el-form-item>

                    <el-form-item label="项目名（英文）">
                        <el-input v-model="form.project"></el-input>
                    </el-form-item>

                    <el-form-item label="包名">
                        <el-input v-model="form.package"></el-input>
                    </el-form-item>

                    <el-form-item label="项目中文名称">
                        <el-input v-model="form.projectComment"></el-input>
                    </el-form-item>

                    <el-form-item label="作者">
                        <el-input v-model="form.author"></el-input>
                    </el-form-item>

                    <el-form-item label="数据库">
                        <el-input v-model="form.db"></el-input>
                    </el-form-item>

                    <el-form-item label="用户名">
                        <el-input v-model="form.dbuser"></el-input>
                    </el-form-item>

                    <el-form-item label="密码">
                        <el-input v-model="form.dbpassword"></el-input>
                    </el-form-item>

                    <el-form-item label-position="right">
                        <el-button type="primary" @click="onSubmit" v-if="isBtn">生成代码</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-col>
    </el-row>
</div>
</body>
<script>
    new Vue({
        el: "#code",
        data() {
            return {
                loading: false,
                isBtn: false,
                templetNameList: {},
                dbNameList: {},
                form: {
                    author: "郑维滨",
                    codePath: "D:\\project\\auto-code",
                    db: "changgou_goods",
                    dbName: "changgou_goods",
                    dbType: "MYSQL",
                    dbpassword: "zheng520@",
                    dbuser: "zboy",
                    imgSavePath: "",
                    ip: "47.108.3.23",
                    package: "com.changgou.goods",
                    passWord: "zheng520@",
                    project: "changgou",
                    projectComment: "畅购商城",
                    region: "shanghai",
                    templetName: "SpringBoot+SpringCloud+MyBatisplus",
                    userName: "zboy",
                    xmlPath: "D:\\project\\auto-code\\db"
                }
            }
        },
        created() {
            axios.post("/getTempletList", this.form).then((res) => {
                if (res.status == 200 && res.data.length > 0) {
                    this.templetNameList = res.data;
                } else {
                    this.$message.error('获取模板列表失败');
                }
            }).catch((e) => {
                this.$message.error('获取模板列表失败，' + e);
            })
        },
        methods: {
            changDB(val){
                this.form.db = val;
            },
            testConnect() {
                axios.post("/testConnect", this.form).then((res) => {
                    if (res.status == 200 && res.data.length > 0) {
                        this.dbNameList = res.data;
                        this.isBtn = true;
                        this.$message({
                            message: '连接成功',
                            type: 'success'
                        });
                    } else {
                        this.$message.error('连接失败');
                    }
                }).catch((e) => {
                    this.$message.error('连接失败，' + e);
                })
            },
            onSubmit() {
                this.loading = true;
                axios.post("/generatorcode", this.form).then((res) => {
                    if (res.status == 200 && res.data != '') {
                        this.loading = false;
                        this.$message({
                            message: '代码生成成功',
                            type: 'success'
                        });
                    } else {
                        this.$message.error('代码生成失败');
                    }
                }).catch((e) => {
                    this.$message.error('代码生成失败，' + e);
                })
            }
        }
    });
</script>
</html>